<!--
 * @Description: 端口表单项
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-16 15:15:55
 * @LastEditTime: 2021-11-10 17:29:14
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="port-box">
    <el-tabs
      v-model="lanTabs"
      type="card"
      addable
      @tab-add="handleAddLan"
      v-if="site.siteType !== 'POP'"
    >
      <el-tab-pane key="lans" label="LAN口" name="lans">
        <tao-table class="table-box" :data="lanList" ref="table">
          <el-table-column align="center" type="index" width="50" />
          <!-- 端口 -->
          <el-table-column align="center" width="200" label="端口" prop="port">
            <template
              slot-scope="scope"
            >{{ scope.row.port ? 'Port-' + scope.row.port[0] + '/' + scope.row.port[1] : '-' }}</template>
          </el-table-column>
          <!-- 类型 -->
          <el-table-column align="center" width="100" label="类型" sortable prop="type" />
          <!-- 限速 -->
          <el-table-column align="center" width="100" label="限速" sortable prop="enableRateLimit">
            <template slot-scope="scope">{{ scope.row.enableRateLimit ? '开启' : '关闭' }}</template>
          </el-table-column>
          <!-- 带宽 -->
          <el-table-column
            align="center"
            width="150"
            label="带宽"
            show-overflow-tooltip
            sortable
            prop="rateLimitValue"
          >
            <template
              slot-scope="scope"
            >{{ scope.row.enableRateLimit ? scope.row.rateLimitValue + 'Mbps' : '-' }}</template>
          </el-table-column>
          <!-- VPN -->
          <el-table-column
            align="center"
            width="150"
            show-overflow-tooltip
            label="VPN"
            prop="vpnId"
          >
            <template
              slot-scope="scope"
            >{{ scope.row.vpnUserLabel ? scope.row.vpnUserLabel : filterVPN(scope.row.vpnId) }}</template>
          </el-table-column>
          <!-- VLAN -->
          <el-table-column align="center" width="100" label="VLAN" sortable prop="vlanOpera">
            <template slot-scope="scope">{{ scope.row.vlanOpera ? '开启' : '关闭'}}</template>
          </el-table-column>
          <!-- VLAN值 -->
          <el-table-column align="center" width="100" label="VLAN值" prop="vlan">
            <template slot-scope="scope">{{ scope.row.vlanOpera ? scope.row.vlan : '-'}}</template>
          </el-table-column>
          <!-- 虚拟IP -->
          <el-table-column align="center" width="200" label="虚拟IP" prop="fictitiousGatewayIp">
            <template slot-scope="scope">{{ site.ha ? scope.row.fictitiousGatewayIp : '-'}}</template>
          </el-table-column>
          <!-- 网关1 -->
          <el-table-column align="center" width="300" label="网关1" prop="oneGatewayIp">
            <template slot-scope="scope">
              <div v-if="site.ha">
                <span v-if="site.lanModel">{{'自动获取 优先级：' + scope.row.oneGatewayIp.priority}}</span>
                <span
                  v-else
                >{{scope.row.oneGatewayIp.ip + '/' + scope.row.oneGatewayIp.mask + ' 优先级：' + scope.row.oneGatewayIp.priority}}</span>
              </div>
              <div v-else>
                <span v-if="site.lanModel">自动获取</span>
                <span v-else>{{scope.row.oneGatewayIp.ip + '/' + scope.row.oneGatewayIp.mask}}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 网关2 -->
          <el-table-column align="center" width="300" label="网关2" prop="twoGatewayIp">
            <template slot-scope="scope">
              <div v-if="site.ha">
                <span v-if="site.lanModel">{{'自动获取 优先级：' + scope.row.twoGatewayIp.priority}}</span>
                <span
                  v-else
                >{{scope.row.twoGatewayIp.ip + '/' + scope.row.twoGatewayIp.mask + ' 优先级：' + scope.row.twoGatewayIp.priority}}</span>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <!-- DHCP -->
          <el-table-column align="center" width="100" label="DHCP" sortable prop="enableDhcp">
            <template slot-scope="scope">{{ scope.row.enableDhcp ? '开启' : '关闭'}}</template>
          </el-table-column>
          <!-- DNS Proxy -->
          <el-table-column align="center" width="150" label="DNS Proxy" sortable prop="dnsProxy">
            <template slot-scope="scope">{{ scope.row.dnsProxy ? '开启' : '关闭'}}</template>
          </el-table-column>
          <!-- 地址池 -->
          <el-table-column align="center" width="300" label="地址池" prop="ipPool">
            <template slot-scope="scope">
              <div v-if="scope.row.enableDhcp">
                <span v-if="site.lanModel">自动获取</span>
                <span v-else>{{ scope.row.ipPoolFrom + ' - ' + scope.row.ipPoolTo}}</span>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <!-- DNS -->
          <el-table-column align="center" min-width="400" label="DNS" prop="dns">
            <template slot-scope="scope">
              <div v-if="scope.row.enableDhcp">
                <span v-if="scope.row.dnsProxy">-</span>
                <span v-else>{{ '主：' + scope.row.primaryDns + ' 备：' + scope.row.backupDns}}</span>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" align="center" width="150px">
            <!-- 编辑  删除-->
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.oldLan"
                type="text"
                icon="el-icon-edit"
                @click="updateLan(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                :disabled="scope.row.oldLan"
                type="text"
                style="color: #FA6962"
                icon="el-icon-delete"
                @click="deleteLan(scope.$index, lanList)"
              >删除</el-button>
            </template>
          </el-table-column>
        </tao-table>
      </el-tab-pane>
    </el-tabs>
    <el-tabs
      v-model="wanTabs"
      type="card"
      addable
      @tab-add="handleAddWan"
      v-if="site.siteType !== 'PON'"
    >
      <el-tab-pane key="wans" label="WAN口" name="wans">
        <tao-table class="table-box" :data="wanList" ref="table">
          <el-table-column align="center" type="index" width="50" />
          <!-- 端口 -->
          <el-table-column align="center" width="200" label="端口" sortable prop="port">
            <template
              slot-scope="scope"
            >{{scope.row.port ? 'Port-' + scope.row.port[0] + '/' + scope.row.port[1] : '-'}}</template>
          </el-table-column>
          <!-- 类型 -->
          <el-table-column align="center" width="200" label="类型" sortable prop="type" />
          <!-- 运营商 -->
          <el-table-column align="center" width="120" label="运营商" sortable prop="compType">
            <template slot-scope="scope">
              <span v-if="scope.row.compType === 'MOBILE'">移动</span>
              <span v-if="scope.row.compType === 'UNICOM'">联通</span>
              <span v-if="scope.row.compType === 'TELECOM'">电信</span>
              <span v-if="scope.row.compType === 'OTHER'">其他</span>
            </template>
          </el-table-column>
          <!-- 线路类型 -->
          <el-table-column align="center" width="120" label="线路类型" sortable prop="lineType">
            <template slot-scope="scope">{{scope.row.lineType === 'INTERNET' ? '因特网' : '专线'}}</template>
          </el-table-column>
          <!-- 带宽值 -->
          <el-table-column align="center" width="120" label="带宽值" prop="bandwidth">
            <template
              slot-scope="scope"
            >{{scope.row.bandwidth === null ? '-' : scope.row.bandwidth + 'Mbps'}}</template>
          </el-table-column>
          <!-- 广域网优化 -->
          <el-table-column align="center" width="120" label="广域网优化" prop="enableWanOptimization">
            <template slot-scope="scope">{{scope.row.enableWanOptimization ? '开启' : '关闭'}}</template>
          </el-table-column>
          <!-- 优先级 -->
          <el-table-column align="center" width="120" label="优先级" sortable prop="priority">
            <template slot-scope="scope">
              <span v-if="scope.row.priority === 'HIGH'">高</span>
              <span v-if="scope.row.priority === 'CENTER'">普通</span>
              <span v-if="scope.row.priority === 'LOW'">低</span>
            </template>
          </el-table-column>
          <!-- 获取方式 -->
          <el-table-column align="center" width="120" label="获取方式" sortable prop="getPathType" />
          <!-- IP地址/掩码 -->
          <el-table-column align="center" width="200" label="IP地址/掩码" prop="ip">
            <template slot-scope="scope">
              <div
                v-if="scope.row.getPathType === 'STATIC'"
              >{{scope.row.ipAddress + '/' + scope.row.mask}}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <!-- 网关地址 -->
          <el-table-column align="center" width="200" label="网关地址" prop="wayAddress">
            <template slot-scope="scope">
              <div v-if="scope.row.getPathType === 'STATIC'">{{scope.row.wayAddress}}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <!-- 用户名 -->
          <el-table-column
            align="center"
            width="150"
            label="用户名"
            show-overflow-tooltip
            prop="userName"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.getPathType === 'PPPOE'">{{scope.row.userName}}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <!-- 密码 -->
          <el-table-column
            align="center"
            width="150"
            label="密码"
            show-overflow-tooltip
            prop="passWord"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.getPathType === 'PPPOE'">{{scope.row.userName}}</div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" align="center" width="150px">
            <!-- 编辑  删除-->
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.oldWan"
                type="text"
                icon="el-icon-edit"
                @click="updateWan(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                :disabled="scope.row.oldWan"
                type="text"
                style="color: #FA6962"
                icon="el-icon-delete"
                @click="deleteWan(scope.$index, wanList)"
              >删除</el-button>
            </template>
          </el-table-column>
        </tao-table>
      </el-tab-pane>
    </el-tabs>
    <lan-dialog
      v-if="lanStatus"
      :vpnls="vpnls"
      :site="site"
      :options="options"
      :lanForm="lanForm"
      :lanStatus="lanStatus"
      :lanIndex="lanIndex"
      @changeLanStatus="changeLanStatus($event)"
      @addLanRow="addLanRow($event)"
    />
    <wan-dialog
      v-if="wanStatus"
      :site="site"
      :options="options"
      :wanForm="wanForm"
      :wanStatus="wanStatus"
      :wanIndex="wanIndex"
      @changeWanStatus="changeWanStatus($event)"
      @addWanRow="addWanRow($event)"
    />
  </div>
</template>

<script>
import lanDialog from './lanDialog';
import wanDialog from './wanDialog';
import { portData } from '@/mock/port.js';
export default {
  props: ['vpnls', 'site', 'lanArry', 'wanArry'],
  components: {
    lanDialog,
    wanDialog
  },
  data () {
    return {
      options: [],
      lanStatus: false,
      lanForm: {},
      lanTabs: 'lans',
      lanList: [],
      lanIndex: null,
      wanStatus: false,
      wanForm: {},
      wanTabs: 'wans',
      wanList: [],
      wanIndex: null
    };
  },
  watch: {
    lanArry: {
      immediate: true,
      handler (val) {
        if (val) {
          if (val.length !== 0) {
            for (let i = 0; i < val.length; i++) {
              let arry = {
                port: val[i].name ? [
                  val[i].name.substring(val[i].name.indexOf('-') + 1, val[i].name.lastIndexOf('/')),
                  val[i].name.substr(val[i].name.indexOf('/') + 1, val[i].name.length),
                  'gei-' + val[i].name.substr(val[i].name.indexOf('-') + 1, val[i].name.length)
                ] : null,
                type: val[i].lanType,
                vpnId: val[i].vpnId,
                vpnUserLabel: val[i].vpnUserLabel ? val[i].vpnUserLabel : null,
                vlanOpera: val[i].vlanOpera,
                vlan: val[i].vlan,
                fictitiousGatewayIp: val[i].fictitiousGatewayIp ? val[i].fictitiousGatewayIp.substr(0, val[i].fictitiousGatewayIp.indexOf('/')) : null,
                oneGatewayIp: {
                  ip: val[i].oneGatewayIp ? val[i].oneGatewayIp.substr(0, val[i].oneGatewayIp.indexOf('/')) : null,
                  mask: val[i].oneGatewayIp ? val[i].oneGatewayIp.substr(val[i].oneGatewayIp.indexOf('/') + 1, val[i].oneGatewayIp.length) : null,
                  priority: val[i].oneGatewayPriority
                },
                twoGatewayIp: {
                  ip: val[i].twoGatewayIp ? val[i].twoGatewayIp.substr(0, val[i].twoGatewayIp.indexOf('/')) : null,
                  mask: val[i].twoGatewayIp ? val[i].twoGatewayIp.substr(val[i].twoGatewayIp.indexOf('/') + 1, val[i].twoGatewayIp.length) : null,
                  priority: val[i].twoGatewayPriority
                },
                enableDhcp: val[i].enableDhcp,
                dnsProxy: val[i].dnsProxy,
                ipPoolFrom: val[i].ipPoolFrom ? val[i].ipPoolFrom.substring(0, val[i].ipPoolFrom.indexOf('/')) : null,
                ipPoolTo: val[i].ipPoolTo ? val[i].ipPoolTo.substring(0, val[i].ipPoolTo.indexOf('/')) : null,
                primaryDns: val[i].primaryDns,
                backupDns: val[i].backupDns,
                oldLan: this.site.nes.length > 0 ? true : false,
                enableRateLimit: val[i].enableRateLimit,
                rateLimitValue: val[i].enableRateLimit ? val[i].rateLimitValue : null
              };
              this.lanList.push(arry);
            }
          }
        }
      }
    },
    wanArry: {
      immediate: true,
      // eslint-disable-next-line complexity
      handler (val) {
        if (val) {
          if (val.length !== 0) {
            for (let i = 0; i < val.length; i++) {
              if (this.site.ha) {
                if (val[i].standByRelation === 'ONE') {
                  let arry = {
                    type: val[i].wanType === 'ETHERIC' ? '网关1-WAN' : '网关1-4G',
                    port: val[i].name ? [
                      val[i].name.substring(val[i].name.indexOf('-') + 1, val[i].name.lastIndexOf('/')),
                      val[i].name.substr(val[i].name.indexOf('/') + 1, val[i].name.length),
                      'gei-' + val[i].name.substr(val[i].name.indexOf('-') + 1, val[i].name.length)
                    ] : null,
                    lineType: val[i].lineType,
                    bandwidth: val[i].upbandWidth,
                    enableWanOptimization: val[i].enableWanOptimization,
                    compType: val[i].netOperator,
                    priority: val[i].priority,
                    getPathType: val[i].addressAcquisition,
                    userName: val[i].userName,
                    passWord: val[i].password,
                    ipAddress: val[i].ip ? val[i].ip.substr(0, val[i].ip.indexOf('/')) : null,
                    mask: val[i].ip ? val[i].ip.substr(val[i].ip.indexOf('/') + 1, val[i].ip.length) : null,
                    wayAddress: val[i].gatewayIp,
                    oldWan: this.site.nes.length > 0 ? true : false
                  };
                  this.wanList.push(arry);
                }
                if (val[i].standByRelation === 'TWO') {
                  let arry = {
                    type: val[i].wanType === 'ETHERIC' ? '网关2-WAN' : '网关2-4G',
                    port: val[i].name ? [
                      val[i].name.substring(val[i].name.indexOf('-') + 1, val[i].name.lastIndexOf('/')),
                      val[i].name.substr(val[i].name.indexOf('/') + 1, val[i].name.length),
                      'gei-' + val[i].name.substr(val[i].name.indexOf('-') + 1, val[i].name.length)
                    ] : null,
                    lineType: val[i].lineType,
                    bandwidth: val[i].upbandWidth,
                    enableWanOptimization: val[i].enableWanOptimization,
                    compType: val[i].netOperator,
                    priority: val[i].priority,
                    getPathType: val[i].addressAcquisition,
                    userName: val[i].userName,
                    passWord: val[i].password,
                    ipAddress: val[i].ip ? val[i].ip.substr(0, val[i].ip.indexOf('/')) : null,
                    mask: val[i].ip ? val[i].ip.substr(val[i].ip.indexOf('/') + 1, val[i].ip.length) : null,
                    wayAddress: val[i].gatewayIp,
                    oldWan: this.site.nes.length > 0 ? true : false
                  };
                  this.wanList.push(arry);
                }
              } else {
                if (this.site.neType === 'ZXR10_V1000') {
                  let arry = {
                    type: val[i].wanType === 'ETHERIC' ? 'WAN' : '4G',
                    port: val[i].name ? [
                      val[i].name.substring(val[i].name.indexOf('/') + 1, val[i].name.indexOf('/') + 2),
                      val[i].name.substr(val[i].name.lastIndexOf('/') + 1, val[i].name.length),
                      'gei-' + val[i].name.substring(val[i].name.indexOf('/') + 1, val[i].name.indexOf('/') + 2) + '/' + val[i].name.substr(val[i].name.lastIndexOf('/') + 1, val[i].name.length)
                    ] : null,
                    lineType: val[i].lineType,
                    bandwidth: val[i].upbandWidth,
                    enableWanOptimization: val[i].enableWanOptimization,
                    compType: val[i].netOperator,
                    priority: val[i].priority,
                    getPathType: val[i].addressAcquisition,
                    userName: val[i].userName,
                    passWord: val[i].password,
                    ipAddress: val[i].ip ? val[i].ip.substr(0, val[i].ip.indexOf('/')) : null,
                    mask: val[i].ip ? val[i].ip.substr(val[i].ip.indexOf('/') + 1, val[i].ip.length) : null,
                    wayAddress: val[i].gatewayIp,
                    oldWan: this.site.nes.length > 0 ? true : false
                  };
                  this.wanList.push(arry);
                } else {
                  let arry = {
                    type: val[i].wanType === 'ETHERIC' ? 'WAN' : '4G',
                    port: val[i].name ? [
                      val[i].name.substring(val[i].name.indexOf('-') + 1, val[i].name.lastIndexOf('/')),
                      val[i].name.substr(val[i].name.indexOf('/') + 1, val[i].name.length),
                      'gei-' + val[i].name.substr(val[i].name.indexOf('-') + 1, val[i].name.length)
                    ] : null,
                    lineType: val[i].lineType,
                    bandwidth: val[i].upbandWidth,
                    enableWanOptimization: val[i].enableWanOptimization,
                    compType: val[i].netOperator,
                    priority: val[i].priority,
                    getPathType: val[i].addressAcquisition,
                    userName: val[i].userName,
                    passWord: val[i].password,
                    ipAddress: val[i].ip ? val[i].ip.substr(0, val[i].ip.indexOf('/')) : null,
                    mask: val[i].ip ? val[i].ip.substr(val[i].ip.indexOf('/') + 1, val[i].ip.length) : null,
                    wayAddress: val[i].gatewayIp,
                    oldWan: this.site.nes.length > 0 ? true : false
                  };
                  this.wanList.push(arry);
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 过滤VPN
    filterVPN (val) {
      let _this = this;
      if (val > 0 && _this.vpnls.length > 0) {
        val = _this.vpnls.find(item => item.id === val).userlabel;
      } else {
        val = '-';
      }
      return val;
    },
    // Lan弹出框
    handleAddLan () {
      let _this = this;
      if (_this.site.siteType === null || _this.site.siteType === '' || _this.site.siteType === undefined || _this.site.neType === null || _this.site.neType === '' || _this.site.neType === undefined || _this.site.dgId === null || _this.site.dgId === '' || _this.site.dgId === undefined) {
        _this.$message.error('站点类型、设备型号、租户不能为空！');
      } else {
        if (_this.site.wifi && _this.site.wifis.length === 0) {
          _this.$message.error('请至少选择一种WiFi类型！');
        } else {
          _this.lanStatus = true;
        }
      }
      if (_this.site.ha) {
        _this.lanForm.vlanOpera = true;
      }
      _this.lanIndex = null;
      _this.options = portData[_this.site.neType];
    },
    // 回调
    changeLanStatus (val) {
      let _this = this;
      _this.lanStatus = val;
    },
    // 回调添加LAN，匹配集合判断端口是否可用
    addLanRow (val) {
      let _this = this;
      let result = _this.lanList.concat(_this.wanList);
      if (val.type === 'LAN') {
        if (result.length === 0) {
          _this.lanList.push(val);
          _this.$emit('handleLanWan', true);
          _this.$message.success('添加成功！');
        } else {
          let arry = [];
          for (let i = 0; i < result.length; i++) {
            if (result[i].port) {
              if (result[i].port[2] === val.port[2]) {
                // 过滤Vlan状态
                // eslint-disable-next-line max-depth
                if (result[i].vlanOpera === val.vlanOpera && result[i].vlanOpera === false) {
                  arry.push('同一个端口下，只允许配置单个父接口！');
                }
                // 过滤Vlan值
                // eslint-disable-next-line max-depth
                if (result[i].vlanOpera === val.vlanOpera && result[i].vlanOpera === true) {
                  // eslint-disable-next-line max-depth
                  if (result[i].vlan === val.vlan) {
                    arry.push('同一个端口下，Vlan值不能相同！');
                  }
                }
              }
            }
          }
          if (arry.length === 0) {
            _this.lanList.push(val);
            _this.$message.success('添加成功！');
          } else {
            _this.$message.error(arry[0]);
          }
        }
      } else {
        let arry = [];
        for (let i = 0; i < result.length; i++) {
          if (result[i].type === 'WIFI-2.4') {
            if (val.type === result[i].type) {
              arry.push('已存在此类型WiFi，请选择其他类型！');
            }
          }
          if (result[i].type === 'WIFI-5.8') {
            if (val.type === result[i].type) {
              arry.push('已存在此类型WiFi，请选择其他类型！');
            }
          }
        }
        if (arry.length === 0) {
          _this.lanList.push(val);
          _this.$emit('handleLanWan', true);
          _this.$message.success('添加成功！');
        } else {
          _this.$message.error(arry[0]);
        }
      }
    },
    // 修改LAN
    updateLan (index, row) {
      let _this = this;
      _this.lanIndex = index;
      _this.lanForm = row;
      _this.lanStatus = true;
    },
    // 删除LAN
    deleteLan (index, rows) {
      let _this = this;
      _this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        rows.splice(index, 1);
        _this.lanList = rows;
        _this.$message.success('删除成功！');
        if (_this.lanList.length === 0 && _this.wanList.length === 0) {
          _this.$emit('handleLanWan', false);
        }
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    },
    // WAN弹出框
    handleAddWan () {
      let _this = this;
      if (_this.site.siteType === null || _this.site.siteType === '' || _this.site.siteType === undefined || _this.site.neType === null || _this.site.neType === '' || _this.site.neType === undefined || _this.site.dgId === null || _this.site.dgId === '' || _this.site.dgId === undefined) {
        _this.$message.error('站点类型、设备型号、租户不能为空！');
      } else {
        if (_this.site.wifi && _this.site.wifis.length === 0) {
          _this.$message.error('请至少选择一种WiFi类型！');
        } else {
          _this.wanStatus = true;
        }
      }
      _this.wanIndex = null;
      _this.options = portData[_this.site.neType];
    },
    // 回调
    changeWanStatus (val) {
      let _this = this;
      _this.wanStatus = val;
    },
    // 回调添加WAN，匹配集合判断端口是否可用
    // eslint-disable-next-line complexity
    addWanRow (val) {
      let _this = this;
      let result = _this.wanList.concat(_this.lanList);
      // 判断是否为CPE设备
      if (_this.site.siteType !== 'POP') {
        if (result.length === 0) {
          _this.wanList.push(val);
          _this.$emit('handleLanWan', true);
          _this.$message.success('添加成功！');
        } else {
          let arry = [];
          for (let i = 0; i < result.length; i++) {
            // 判断网关1、网关2、WAN端口
            if (result[i].type === val.type) {
              if (result[i].port !== null) {
                // eslint-disable-next-line max-depth
                if (result[i].port[2] === val.port[2]) {
                  arry.push('设备端口已被占用，请选择其他端口！');
                }
              } else {
                // eslint-disable-next-line max-depth
                if (val.type === '4G') {
                  arry.push('已存在4G口，请选择其他类型！');
                }
                // eslint-disable-next-line max-depth
                if (val.type === '网关1-4G') {
                  arry.push('已存在网关1-4G口，请选择其他类型！');
                }
                // eslint-disable-next-line max-depth
                if (val.type === '网关2-4G') {
                  arry.push('已存在网关2-4G口，请选择其他类型！');
                }
              }
            }
            // 判断LAN口下端口
            if (result[i].type === 'LAN') {
              // 判断是否添加的4G口
              if (val.port) {
                // eslint-disable-next-line max-depth
                if (result[i].port[2] === val.port[2]) {
                  arry.push('设备端口已被占用，请选择其他端口！');
                }
              }
            }
          }
          if (arry.length === 0) {
            _this.wanList.push(val);
            _this.$message.success('添加成功！');
          } else {
            _this.$message.error(arry[0]);
          }
        }
      } else {
        // 判断4G是否开启
        if (_this.site.lte) {
          if (result.length === 0) {
            _this.wanList.push(val);
            _this.$emit('handleLanWan', true);
            _this.$message.success('添加成功！');
          } else {
            let arry = [];
            for (let i = 0; i < result.length; i++) {
              if (result[i].type === val.type) {
                // eslint-disable-next-line max-depth
                if (result[i].type === '4G') {
                  arry.push('已存在4G口，请选择其他类型！');
                }
              }
            }
            if (arry.length === 0) {
              _this.wanList.push(val);
              _this.$emit('handleLanWan', true);
              _this.$message.success('添加成功！');
            } else {
              _this.$message.error(arry[0]);
            }
          }
        } else {
          _this.wanList.push(val);
          _this.$emit('handleLanWan', true);
          _this.$message.success('添加成功！');
        }
      }
    },
    // 修改WAN
    updateWan (index, row) {
      let _this = this;
      _this.wanIndex = index;
      _this.wanForm = row;
      _this.wanStatus = true;
    },
    // 删除WAN
    deleteWan (index, rows) {
      let _this = this;
      _this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        rows.splice(index, 1);
        _this.wanList = rows;
        _this.$message.success('删除成功！');
        if (_this.lanList.length === 0 && _this.wanList.length === 0) {
          _this.$emit('handleLanWan', false);
        }
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.port-box {
  ::v-deep .el-tabs {
    margin-bottom: 20px;
  }
  ::v-deep .el-tabs__new-tab {
    background-color: #67c23a;
    border-color: #e1f3d8;
    color: #e1f3d8;
  }
}
.table-box {
  ::v-deep .el-button {
    padding: 0;
  }
}
</style>